<script lang="ts">
import { defineComponent } from "vue";
import { previewImage } from "@/utils/meida";

import EditMenuTitle from "./edit-menu-title.vue";
import DetailImgList from "./detail-img-list.vue";

export default defineComponent({
  components: { EditMenuTitle, DetailImgList },
  props: {
    info: { type: Object, required: true },
    title: String,
  },
  setup(props) {
    const imgClick = () => {
      previewImage([props.info.guider_pic], 0);
    };

    return { imgClick };
  },
});
</script>

<template>
  <view class="certificate-info">
    <view class="certificate-info-header">
      <view class="certificate-info-header2"></view>{{ title }}
    </view>

    <view class="certificate-info-item">
      <view class="certificate-info-label">首次取得导游证日期</view>
      <view class="certificate-info-content">
        <view class="certificate-info-value">{{ info.guider_date }}</view>
      </view>
    </view>
    <view class="certificate-info-line"></view>
    <view class="certificate-info-item">
      <view class="certificate-info-label">导游证号</view>
      <view class="certificate-info-content">
        <view class="certificate-info-value">{{ info.guider_no }}</view>
      </view>
    </view>
    <view class="certificate-info-line"></view>
    <view class="certificate-info-item">
      <view class="certificate-info-label">导游级别</view>
      <view class="certificate-info-content">
        <view class="certificate-info-value">{{ info.guider_level_name }}</view>
      </view>
    </view>
    <view class="certificate-info-line"></view>
    <template
      v-if="
        info.identity_type.includes(8) ||
        info.identity_type.includes(10) ||
        info.identity_type.includes(11)
      "
    >
      <view class="certificate-info-item">
        <view class="certificate-info-label">导游语种</view>
        <view class="certificate-info-content">
          <view class="certificate-info-value">
            {{ info.language_name_arr }}
          </view>
        </view>
      </view>
      <view class="certificate-info-line"></view>
    </template>

    <template v-if="info.identity_type.includes(8)">
      <view class="certificate-info-item">
        <view class="certificate-info-label">研学导师证书编号</view>
        <view class="certificate-info-content">
          <view class="certificate-info-value">{{ info.tutor_no }}</view>
        </view>
      </view>
      <view class="certificate-info-line"></view>
      <view class="certificate-info-item">
        <view class="certificate-info-label">获证日期</view>
        <view class="certificate-info-content">
          <view class="certificate-info-value">{{ info.tutor_date }}</view>
        </view>
      </view>
      <view class="certificate-info-line"></view>
      <view class="certificate-info-img3">
        <DetailImgList :listData="info.tutor_pics" title="认证资料" />
      </view>
    </template>
    <template v-else-if="info.identity_type.includes(11)">
      <view class="certificate-info-item">
        <view class="certificate-info-label">领队证编号</view>
        <view class="certificate-info-content">
          <view class="certificate-info-value">{{ info.leader_no }}</view>
        </view>
      </view>
      <view class="certificate-info-line"></view>
      <view class="certificate-info-item">
        <view class="certificate-info-label">首次获得领队证日期</view>
        <view class="certificate-info-content">
          <view class="certificate-info-value">{{ info.leader_date }}</view>
        </view>
      </view>
      <view class="certificate-info-line"></view>
      <view class="certificate-info-img3">
        <DetailImgList :listData="info.leader_pics" title="认证资料" />
      </view>
    </template>
    <template v-else>
      <view class="certificate-info-title">
        <EditMenuTitle title="导游证" />
      </view>
      <view class="certificate-info-img">
        <image
          class="certificate-info-img2"
          :src="info.guider_pic"
          mode="aspectFill"
          @click="imgClick"
        />
      </view>
    </template>
  </view>
</template>

<style lang="scss">
.certificate-info {
  .certificate-info-header {
    display: flex;
    align-items: center;
    height: 44rpx;
    padding-left: 30rpx;
    margin-bottom: 10rpx;
    font-size: 30rpx;
    color: #333333;
    line-height: 44rpx;
    font-weight: bold;
  }

  .certificate-info-header2 {
    width: 6rpx;
    height: 28rpx;
    margin-right: 20rpx;
    border-radius: 4rpx;
    background-color: #ff7900;
  }

  .certificate-info-item {
    display: flex;
    align-items: center;
    min-height: 72rpx;
    padding: 14rpx 60rpx 14rpx 30rpx;
  }

  .certificate-info-label {
    flex-shrink: 0;
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
  }

  .certificate-info-content {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-grow: 1;
    min-width: 0;
    margin-left: 20rpx;
  }

  .certificate-info-line {
    margin: 0 30rpx;
    border-bottom: 2rpx solid #dddddd;
  }

  .certificate-info-value {
    font-size: 30rpx;
    color: #333333;
    line-height: 42rpx;
    text-align: right;
  }

  .certificate-info-title {
    display: flex;
    align-items: center;
    padding: 28rpx 30rpx 34rpx 30rpx;
  }

  .certificate-info-img {
    display: flex;
    align-items: flex-start;
    padding-left: 30rpx;
    padding-bottom: 40rpx;
  }

  .certificate-info-img2 {
    width: 280rpx;
    height: 210rpx;
    border-radius: 28rpx;
  }

  .certificate-info-img3 {
    padding-top: 34rpx;
  }
}
</style>